<style scoped>
	.content {
    color: #fff;
    height: 3em;
    line-height: 3;
    position: relative;
    text-align: left;
	}
	.chooseBtn,.uploadpics{
		width:3em;
		height:inherit;
	}
	.uploadpics{
		border:1px solid darkgrey;
	}
	.chooseBtn{
		background: #F9B569;
		text-align: center;
		display: inline-block;
	}
	.submit{
		display: block;
		margin-top:10px;
	}
</style>
<template>
	<div class="content" @click="chooseImages">
		<template v-for="localId in image_localIds">
			<img class="uploadpics" :src="localId" alt="">
		</template>
		<div class="chooseBtn">+</div>
	</div>
</template>
<script type="text/javascript">
	var JSSDK = require('../../utils/jssdk.js');
	var _jssdk = null;
	module.exports={
		data:function(){
			return {
				image_localIds:[]
			}
		},
		ready:function(){
			_jssdk = new JSSDK(this)
		},
		methods:{
			chooseImages:function(){
				var that = this;
				_jssdk.chooseImages(function(localIds){
					that.image_localIds = localIds;
					that.$dispatch('afterChooseImages',_jssdk,localIds);
				});
			},
			uploadImages:function(){
				_jssdk.uploadImages(_jssdk.image_localIds);
				this.image_serverIds = _jssdk.image_serverIds;
			}
		}
	}
</script>